import React from './core/React.js'
const { useState, useEffect } = React

function Foo() {
    const [count, setCount] = useState(10)
    const [bar, setBar] = useState('bar')
        
    function handleClick() {
        setCount((c) => c + 1)
        setBar((s) => s)
    }

    useEffect(() => {
        console.log('init');
        return () => {
            console.log('cleanup 0');
        }
    },[])
    
    useEffect(() => {
        console.log('update', count);
        return () => {
            console.log('cleanup 2');
        }
    }, [count])

    return (
        <div>
            <h3>{count}</h3>
            <div>{bar}</div>
            <button onClick={handleClick}>click</button>
        </div>
    )
}

function Bar() {
    console.log("bar return");

    const [countBar, setCountBar] = useState(1)
    const update = React.update()
    function handleClick() {
        setCountBar(countBar + 1)
        update()
    }

    return (
        <div>
            <h1>Bar</h1>
            {countBar}
            <button onClick={handleClick}>click</button>
        </div>
    )
}

function App() {
    console.log("app return");

    const [isShow, setIsShow] = useState(true)
    const [countRoot, setCountRoot] = useState(1)

    const update = React.update()
    function handleClick() {
        setIsShow(!isShow)
        setCountRoot(countRoot + 1)
        update()
    }


    const child1 = <div>child1</div>
    const child2 = <p>child2</p>

    return (
        <div>
            {isShow ? child1 : child2}

            count: {countRoot}

            <button onClick={handleClick}>click</button>

            <Foo></Foo>
            <Bar></Bar>
        </div>
    )
}

export default App